<template>
  <div>
    <!-- 1.搜索栏 -->
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>搜索条件</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <el-form ref="form" :inline="false" :model="formInline" label-width="80px" size="small">

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="标题">
              <el-input v-model="formInline.title" placeholder="标题" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="作者">
              <el-input v-model="formInline.author" placeholder="作者" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="resetSearch">取消</el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-card>

    <!-- 2.数据表格 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <span>搜索条件</span> -->
        <el-button type="primary" @click="goDetail">新增</el-button>
      </div>
      <el-table
        :data="articleList"
        border
        height="1000"
        style="width: 100%"
        align="center"
      >
        <el-table-column
          prop="title"
          label="文章标题"
          width="100"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="author"
          label="作者"
          width="100"
          align="center"
        />
        <el-table-column
          prop="summary"
          label="文章概述"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="封面图片"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.coverImg" alt="" class="img">
          </template>
        </el-table-column>
        <el-table-column
          label="浏览/赞/收藏"
          align="center"
        >
          <template slot-scope="scope">
            <p class="count-text">浏览量: {{ scope.row.viewCount }}</p>
            <p class="count-text zan-count-text">赞量: {{ scope.row.zanCount }}</p>
            <p class="count-text">收藏量: {{ scope.row.collectCount }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="是否展示"
          align="center"
        >
          <template slot-scope="scope">

            <el-switch
              v-model="scope.row.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="isChange(scope.row)"
            />

          </template>
        </el-table-column>
        <el-table-column
          prop="modifyTime"
          label="创建时间"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button @click="dleArticle(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-row :gutter="20">
        <el-col :span="6" :offset="14">
          <el-pagination
            style="margin-top: 30px"
            :current-page="pages.start"
            :page-sizes="pages.sizes"
            :page-size="pages.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pages.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>

    </el-card>

  </div>
</template>

<script>
import { findArticles as findArticleList,
  changeShowStatus as changeShowStatusApi,
  del as delApi
} from '@/api/content/article/index.js'
export default {
  name: '',
  data() {
    return {
      formInline: {},
      pages: {
        start: 1,
        limit: 5,
        sizes: [5, 10, 15, 20],
        totalCount: 0
      },
      articleList: [] // 文章列表
    }
  },
  mounted() {

  },
  created() {
    this.findArticleList()
  },
  methods: {
    findArticleList() {
      const { start, limit } = this.pages
      findArticleList(start, limit, this.formInline)
        .then(res => {
          console.log(res)
          const { message: mesErr, success, data } = res
          if (success) {
            const { rows, total } = data
            // 获取数据
            this.articleList = rows
            // 处理分页
            this.pages.totalCount = total
            console.log(this.pages.totalCount)
          } else {
            this.$message.error(mesErr)
          }
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pages.limit = val
      this.findArticleList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pages.start = val
      this.findArticleList()
    },
    onSearch() {
      // 点击查询
      this.findArticleList()
      this.pages.start = 1
      this.pages.limit = 5
    },
    resetSearch() {
      this.formInline = {}
      this.findArticleList()
    },
    isChange(val) {
      // 切换文章显示
      console.log(val)
      const { id, isShow } = val
      changeShowStatusApi({
        isShow: isShow,
        id: id
      }).then(res => {
        const { success, message } = res
        if (success) {
          this.$message({
            message: message,
            type: 'success'
          })
        }
      })
    },
    dleArticle(val) {
      console.log(val)
      // 删除文章
      const { id } = val
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delApi(id).then(res => {
          console.log(res)
          const { success, message } = res
          if (success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message.error(message)
          }
          this.findArticleList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    goDetail() {
      // 新增文章
      this.$router.push({ name: 'content-detail-add' })
    }
  }
}
</script>

<style scoped lang="scss">
.box-card{
  margin: 30px;
}
.img{
  width: 100px;
  height: 100px;
}
</style>
